<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	response.setHeader("X-Frame-Options","SAMEORIGIN");
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>中国安全防范技术行业协会后台管理系统</title>
<jsp:include page="../../public/public.jsp" />
<script type="text/javascript" src="<%=basePath%>them/js/role.js"></script>

</head>



<body class="easyui-layout" style="width: 100%;height: 100%">
	
	<div data-options="region:'west',split:true,title:'权限管理'" style="width:20%;" >
		
		
		<table id="role_tb" class="easyui-datagrid" style="width:100%;height:100%;"
		 data-options="url:'<%=basePath %>role/queryRole',fitColumns:true,singleSelect:true,toolbar:roleToo">  
		  <thead>   
	        <tr>   
	            <th data-options="field:'roleId',width:30,align:'center'">权限编号</th>   
	            <th data-options="field:'roleName',width:70,align:'center'">权限名称</th>     
	        </tr>   
   		 </thead>    
		</table>
	</div>
	
	
	<div data-options="region:'center',title:'Center',title:'权限分配'" style="width:80%;">
			
			<div style="width: 25%;height: 80%;margin:3% 5%;float: left">
				
				<table id="yesRoleDg" class="easyui-treegrid" style="width:100%;height:100%;"
				data-options="
					method: 'post',
					rownumbers: true,
					idField: 'id',
					treeField: 'text'
				">
				<thead>
					<tr>
						<th data-options="field:'text',width:240,align:'left'">已分配菜单</th>	
					</tr>
				</thead>
			</table>
			</div>
			
			<div style="float: left;margin-top: 20%">
				<a href="#" class="easyui-linkbutton" style="width:80px" onclick="fn_del_rolemenu()">》》</a>
				
				<p></p>
			<a href="#" class="easyui-linkbutton" style="width:80px" onclick="fn_add_rolemenu()">《《</a>
			</div>
			
			
			<div style="width: 25%;height: 80%;margin-top: 3%;margin-left: 5%;float: left;">
				
				<table id="noRoleDg" class="easyui-treegrid" style="width:100%;height:100%;"
				data-options="
					method: 'post',
					rownumbers: true,
					idField: 'id',
					treeField: 'text'
				">
				<thead>
					<tr>
						<th data-options="field:'text',width:240,align:'left'">未分配菜单</th>	
					</tr>
				</thead>
			</table>
			</div>			
	</div>
	
	<!-- 添加窗口表单 -->
		<div id="add" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-edit'" style="width:300px;height:370px;padding:10px;"> 
			
			<form id="addForm" method="post">
		  		<table align="center" style="margin-top:20px">
		    		<tr style="height: 30px">
		    			<td>权限名称:</td>
		    			<td>
		    			<input  id="roleIdUpdate" type="hidden"  />
		    			<input  id="roleNameAdd"  class="easyui-textbox" data-options="width:150,required:true"/>
		    			</td>
		    		</tr>
		   		</table>
			</form>
		</div>
	<!--添加窗口表单 end -->
</body>


<script type="text/javascript">
/* 角色图标 */
var roleToo = [{
	text:'增加',
	iconCls:'icon-add',
	handler:function(){
		addUpdate("add");
	}
},'-',{
	text:'修改',
	iconCls:'icon-edit',
	handler:function(){
		addUpdate("edit");
	}
},'-',{
	text:'删除',
	iconCls:'icon-cut',
	handler:function(){
		delRole();
	}
}];

/* 删除触发 */
function delRole(){
	var rowdata=$('#role_tb').datagrid('getSelected'); 
	if(rowdata==null){
		$.messager.alert("友情提示","请先选中一条数据","error");
		return;
	}
	$.messager.confirm('确认','您确认想要删除此权限及其相关的【全部数据】？',function(r){    
	    if (r){    
	    	$.ajax({  
	    		url:'<%=basePath %>role/delRole',
	    		type:'post',
	    		data:{
	    			'roleId':rowdata.roleId
	    		},
	    		dataType:'json',
	    		error:function(){
	    			$.messager.alert("友情提示","系统异常,请稍后尝试","error");	
	    		}, 
	    		success:function(data){
	    			var row = data.row;
	    			var msg = data.msg;
	    			$.messager.alert("友情提示",msg,"info");
	    			if(row>=0){
	    				$('#role_tb').datagrid("reload");
	    			}	
	    		}  
	    	});  
	    }    
	});  
	
	
}

/* 添加和修改触发 */
function addUpdate(urlstr){
	$('#addForm').form('reset');
	var url = "";
	var rowdata = "";
	if(urlstr=="add"){
		url='<%=basePath %>role/insertRole';
	}
	if(urlstr=="edit"){
		url='<%=basePath %>role/updateRole';
		rowdata=$('#role_tb').datagrid('getSelected'); 
		if(rowdata==null){
			$.messager.alert("友情提示","请先选中一条数据","error");
			return;
		}
		$("#roleIdUpdate").val(rowdata.roleId);
		$('#roleNameAdd').textbox('setValue',rowdata.roleName);
	}
	//先对表单进行清空
	$('#add').show();
		$('#add').dialog({
			title: '新增权限信息',
			width: 350,
			height: 250,
			closed: false,
			cache: false,
			modal: true,
			buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
				  	if($("#addForm").form('validate')){
				  		var roleNameAdd = $("#roleNameAdd").val().replace(/\s/g, "");
				  		var roleIdUpdate = $("#roleIdUpdate").val();
				  		if(roleNameAdd==""){
				  			$.messager.alert("友情提示","权限名称不允许为空","error");
				  			return;
				  		}
				  		if(roleIdUpdate==null || roleIdUpdate==""){
				  			roleIdUpdate=0;
				  		}
					  	$.ajax({  
							url:url,
							type:'post',
							data:{
								'roleId':roleIdUpdate,
								'roleName':roleNameAdd
							},
							dataType:'json',
							error:function(){
								$.messager.alert("友情提示","系统异常,请稍后尝试","error");	
							}, 
							success:function(data){
								var row = data.row;
								var msg = data.msg;
								$.messager.alert("友情提示",msg,"info");
								if(row>=0){
									$('#role_tb').datagrid("reload");
									$('#add').window('close');  // close a window  
								}
								
								
							}  
						});
				  	}
				    
				}
					
			},{
				text:'退出',
				iconCls:'icon-no',
				handler:function(){
					$('#add').dialog('close');
				}
			}]
		});
}


/* 点击权限管里里面的对应角色所在行   触发事件 */
 $('#role_tb').datagrid({
	 onClickRow: function(index,row){
		
		
		var roleId = row.roleId;
		
		$('#yesRoleDg').treegrid({    
		    url:'<%=basePath %>menu/queryMenuByRole?id=1&urlType=yesRole&roleId='+roleId   
		       
		});
		$('#noRoleDg').treegrid({    
		    url:'<%=basePath %>menu/queryMenuByRole?id=1&urlType=noRole&roleId='+roleId    
		       
		});
		
		
	}
});

/* ---------------------------------------------------------------------------------- */


/* 删除 （已分配菜单） 的节点 */
function fn_del_rolemenu(){
	var menuidstr = '';
	
	/* 获取当前选中的节点数据 */
	var row=$("#yesRoleDg").treegrid('getSelected');
	if(row){
		
		/* 查询 要删除的  父节点信息  
			parent这个字符串  返回了 当前选中节点的 id
			和 需要删除的  父节点 的  id
			（如果当前（父节点）里面已经没有了（子节点），
			那么就把这个（父节点）也删除掉）
		*/
		var parent = fn_get_yesRoleDg_parent(row);
		/* 拆分，把结果循环插入到  要删除的 （字符串menuidstr里面） */
		var parentIds=parent.split(',');
		for(i=0;i<parentIds.length;i++){

				menuidstr += parentIds[i]+',';  
		}
		
		/* 获取当前选中节点的  所有（子节点信息） ，
		循环遍历插入到要删除的 （字符串menuidstr里面）
		（当前选中节点的（所有子节点），都应该是需要删除的）
		*/
		var children = $('#yesRoleDg').treegrid('getChildren', row.id);
		$.each(children,function(i,cm){
				menuidstr+=cm['id']+',';
		});
		if(menuidstr!=''){
			/* 截取要删除的 结果 字符串 menuidstr 
			去掉最后一个 “，”逗号
			*/
			menuidstr = menuidstr.substring(0,menuidstr.length-1);
			
			var rowMsg = $('#role_tb').datagrid("getSelected");
			var roleId = rowMsg.roleId;
			
			$.ajax({  
				url:'<%=basePath %>roleMenu/delRoleMenu',
				type:'post',
				data:{
					'menuidstr':menuidstr,
					'roleId':roleId
					
				},
				dataType:'json',
				error:function(){
					$.messager.alert("提示","移除菜单异常","error");
				}, 
				success:function(r){ 
					if(r.rows!=-1){
						
						var startId ='yesRoleDg';
						var endId ='noRoleDg';
						var rowss=$('#'+startId+'').treegrid('getSelected');
						/* 添加进已分配菜单   start */
						 add_YesMenu_nodes(rowss,startId,endId);
						/* 添加进已分配菜单   end */
						/* 移除 start */
						var resultParent=[];
						resultParent= remove_NoMneu_nodes(rowss,startId);
						var resultDom  =resultParent[resultParent.length-1];
						$('#yesRoleDg').treegrid('remove', resultDom.id);
						/* 移除 end */
						
						
						
						//	$.messager.alert("提示","移除菜单成功","info");
						//$('#yesRoleDg').treegrid('reload');	//  重新刷新已分配  树形表格
						//$('#noRoleDg').treegrid('reload');	//  重新刷新未分配  树形表格
					}else{
						$.messager.alert("提示","移除菜单失败","error");
					}
					
				}  
			}); 
			

		}else{
			alert('没有可删除的菜单');
		}
	}else{
		alert('请选择需要移除的菜单')
	}
}

/* 添加菜单  从（未分配菜单）添加到（已分配菜单） */
function fn_add_rolemenu(){
	
	var menuidstr = '';
	/* 获取已经选中的 （未分配菜单） 节点数据 */
	var row=$("#noRoleDg").treegrid('getSelected');
	if(row){
		
		/* 获取（已分配菜单）里面的所有菜单数据 */
		var nodes  =$('#yesRoleDg').treegrid('getChildren');
		
		/* 查询已选中的 （未分配菜单） 的节点数据的  父节点数据 */
		var parent = fn_get_noRoleDg_parent(row);
		/* 拆分成数组 */
		var parentIds=parent.split(',');
		for(i=0;i<parentIds.length;i++){
			/* 判断 节点数据  在（已分配菜单） 节点数据里面存在不存在，
			如果不存在  就拼接到   menuidstr 字符串，
			因为这是要添加进（已分配菜单的）
			*/
			 if(!fn_check_menu_isexit(nodes,parentIds[i])){ 
				menuidstr += parentIds[i]+',';
			 }     
		}
		/* 查询已选中的 （未分配菜单） 的节点数据的  下的所有（子节点） 数据 */
		var children = $('#noRoleDg').treegrid('getChildren', row.id);
		/* 循环判断 （子节点数据） 在 （已分配菜单）节点里面 存在不存在 ，
		如果不存在  就拼接到   menuidstr 字符串
		因为这是要添加进（已分配菜单的）
		*/
		$.each(children,function(i,cm){
			 if(!fn_check_menu_isexit(nodes,cm['id'])){ 
				menuidstr+=cm['id']+',';
			 } 
		});
		
		var rowMsg = $('#role_tb').datagrid("getSelected");
		var roleId = rowMsg.roleId;

		
		if(menuidstr!=''){
			/* 截取字符串，去掉最后一个    ',' */
			menuidstr = menuidstr.substring(0,menuidstr.length-1);
		  	
		  	$.ajax({  
				url:'<%=basePath %>roleMenu/addRoleMenu',
				type:'post',
				data:{
					'menuidstr':menuidstr,
					'roleId':roleId
					
				},
				dataType:'json',
				error:function(){
					$.messager.alert("提示","分配菜单异常","error");
				}, 
				success:function(r){ 
					if(r.rows!=-1){
					
						var startId ='noRoleDg';
						var endId ='yesRoleDg';
						var rowss=$('#'+startId+'').treegrid('getSelected');
						/* 添加进已分配菜单   start */
						add_YesMenu_nodes(rowss,startId,endId);
						/* 添加进已分配菜单   end */
						/* 从未分配菜单移除 start*/
						var resultParent=[];
						resultParent= remove_NoMneu_nodes(rowss,startId);
						var resultDom  =resultParent[resultParent.length-1];
						$('#noRoleDg').treegrid('remove', resultDom.id);
						/* 移除 end*/
						
						//$.messager.alert("提示","分配菜单成功","info");
						//$('#yesRoleDg').treegrid('reload');	//  重新刷新已分配  树形表格
						//$('#noRoleDg').treegrid('reload');	//  重新刷新未分配  树形表格
					}else{
						$.messager.alert("提示","分配菜单失败","error");
					}
					
				}  
			}); 
		  	
		}else{
			alert('没有可添加的菜单');
		}
	}else{
		alert('请选择需要移除的菜单')
	}

}



function fn_get_yesRoleDg_parent(row){
	/* row是当前（已分配菜单的）节点数据，然后获取 其父节点 */
	var parent = $('#yesRoleDg').treegrid('getParent', row.id);
	/* （已选中菜单）当前选中要删除节点的 id   添加进要删除的id的字符串里面 */
	var str = row.id+"";
	
		if(parent){
			/* 查询到当前菜单的 父节点 。 如果（父节点）下面的（子集合）的长度是1,
			（就重复查询上一个节点的数据，直到（根目录），根目录  查询不到父节点了，也就进不来这个方法了。）
			那就是说，当前节点是最后一个数据，那么就把这个父节点也删除掉，
			因为父节点，里面已经没有了数据。
			*/
			var size = parent.children.length;
			if(size==1){
				str += ','+fn_get_yesRoleDg_parent(parent);
			}
		}
	return str;
}

/* 获取选中的父节点信息  根据节点  循环一直找到 根目录，然后存入  str字符串   
 	这是（未分配菜单的）父节点获取*/
function fn_get_noRoleDg_parent(row){
	/* row是当前（未分配菜单的）节点数据，然后获取 其父节点 */
	var parent = $('#noRoleDg').treegrid('getParent', row.id);
	var str = row.id+"";
	if(parent){
		str += ','+fn_get_noRoleDg_parent(parent);
	}
	return str;
}



</script>

</html>